<template>
  <el-card shadow="always" class="m-margin-1">
    <el-row>
      <el-col :xl="21" :lg="21">
        <div class="title1">自定义遥测集</div>
      </el-col>
      <el-col :xl="3" :lg="3">
        <el-button type="primary" :icon="Plus" @click="addVisible=true">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="utmList" stripe>
      <el-table-column label="遥测集" prop="name"></el-table-column>
      <el-table-column label="遥测名称" prop="ids"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button 
          class="btn"
          link
          :icon="Edit"
          :data-clipboard-text="scope.row.value" 
          @click="handleEdit(scope.row)"></el-button>
          <ConfirmButton
          class="btn"
          link
          :icon="Delete"
          :data-clipboard-text="scope.row.value"
          :title="'您确定要删除吗？'" 
          @confirm="handleDel(scope.row)"></ConfirmButton>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog
  ref="addDialog"
  :title="title + '遥测集'"
  v-model="addVisible"
  :width="'1000px'"
  :destroy-on-close="true"
  >
    <AddTmSet @close="closeDialog"></AddTmSet>
  </el-dialog>
</template>

<script setup>
import {
  Plus,
  Delete,
  Edit
} from '@element-plus/icons-vue'
import { onBeforeMount, ref } from 'vue'
import AddTmSet from './components/AddTmSet.vue'
import ConfirmButton from '@/components/Buttons/ConfirmButton.vue'
import {failedNotify, successNotify} from '@/comm/index.js'
import { getUtm, delUtm } from '@/api/loads-api.js'
import { useTmStore } from '@/stores/tm-module.js'

let addVisible = ref(false)
let addDialog = ref(null)
let utmList = ref([])
let title = ref('新增')
const tmStore = useTmStore()

onBeforeMount(() => {
  initData()
})

const initData = () => {
  getUtm((response) => {
    const resData = response.data.lists
    utmList.value = resData
  }, (error) => {
    console.log("error:", error)
  })
}

const handleEdit = (row) => {
  tmStore.setEdUdObj(row)
  title.value = "修改"
  addVisible.value = true
}

const handleDel = (row) => {
  const reqJson = { 'name': row.name }
  delUtm(reqJson, (response) => {
    successNotify('操作成功!', response)
    initData()
  })
}
const closeDialog = () => {
  addVisible.value = false
  initData()
}
</script>

<style lang="scss" scoped>

</style>